<ui-panel class="service-form-container">
    <form name="vm.baseForm" novalidate ng-submit="vm.baseForm.$valid && vm.next()">
      
        <div class="row-box">
            <div class="row-box-desc">
                <div>部署信息</div>
            </div>
            <div class="row-box-form">
                <div class="row">
                    <div class="col-md-7">
                        <div class="form-group" ng-class="{'has-error': (vm.baseForm.cluster.$touched || vm.baseForm.$submitted )
                         && vm.baseForm.cluster.$error.required}">
                            <label>容器集群 <span class="loading-sm margin-left-5" style="display:inline-block;" ng-show="vm.lesseeLoading"></span></label>
                            <ui-select ng-model="vm.cluster" name="cluster" ng-change="vm.getLessee()" required>
                                <ui-select-match placeholder="请选择容器集群">
                                    <span>{{$select.selected.clusterCode}}</span>
                                </ui-select-match>
                                <ui-select-choices repeat="opt in vm.clusterList | filter: $select.search">
                                    <div ng-bind-html="::opt.clusterCode"></div>
                            <span class="label label-info ui-choices-cluster-small"
                                  ng-bind-html="::opt.clusterName"></span>
                                </ui-select-choices>
                            </ui-select>
                            <div class="text-danger" ng-show="(vm.baseForm.cluster.$touched || vm.baseForm.$submitted )
                         && vm.baseForm.cluster.$error.required">请选择容器集群
                            </div>
                        </div>
                    </div>
                    <div class="col-md-5">
                        <div class="form-tooltip-group"><i class="fa fa-question"></i>指定应用部署于哪个集群</div>
                    </div>
                </div>
                <div class="row" ng-show="vm.cluster">
                   <div class="col-md-7">
                        <div class="form-group" ng-class="{'has-error': (vm.baseForm.lessee.$touched || vm.baseForm.$submitted )
                         && vm.baseForm.lessee.$error.required}">
                            <label>租户</label>
                            <ui-select ng-model="vm.lessee" name="lessee" required>
                                <ui-select-match placeholder="请选择租户">
                                    <span>{{$select.selected.namespaceCode}}</span>
                                </ui-select-match>
                                <ui-select-choices repeat="opt in vm.lesseeList | filter: $select.search">
                                    <div ng-bind-html="::opt.namespaceCode"></div>
                            <span class="label label-info ui-choices-cluster-small"
                                  ng-bind-html="::opt.namespaceName"></span>
                                </ui-select-choices>
                            </ui-select>
                            <div class="text-danger" ng-show="(vm.baseForm.lessee.$touched || vm.baseForm.$submitted )
                         && vm.baseForm.lessee.$error.required">请选择租户
                            </div>
                        </div>
                    </div>
                    <div class="col-md-5">
                        <div class="form-tooltip-group"><i class="fa fa-question"></i>指定哪个租户</div>
                    </div>
                </div>
            </div>
        </div>
        <hr/>
          <div class="row-box">
            <div class="row-box-desc">
                <div>基础信息</div>
            </div>
            <div class="row-box-form">
                <div class="row">
                    <div class="col-md-7">
                        <div class="form-group"
                             ng-class="{'has-error': (vm.baseForm.name.$touched || vm.baseForm.$submitted ) && (vm.baseForm.name.$error.required)}">
                            <label for="name" class="control-label">应用名称</label>
                            <input type="text" maxlength="50" ng-model="vm.name" class="form-control" id="name" name="name"
                                   placeholder="请输入应用名称" required>

                            <div class="text-danger" ng-show="(vm.baseForm.name.$touched || vm.baseForm.$submitted )">
                                <span ng-show="vm.baseForm.name.$error.required">请输入应用名称</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-7">
                        <div class="form-group" ng-class="{'has-error': (vm.baseForm.code.$touched || vm.baseForm.$submitted )
             && (vm.baseForm.code.$error.required || vm.baseForm.code.$error.pattern || vm.baseForm.code.$error.duplicate || vm.baseForm.code.$error.network)}">
                            <label for="code" class="control-label">应用编码 <i ng-show="vm.appCodeChecking" class="fa-fw fa fa-refresh fa-spin"></i></label>
                            <input type="text" maxlength="50" ng-model="vm.code" ng-blur="vm.checkAppCode()"
                                   class="form-control" id="code" name="code" placeholder="请输入应用编码"
                                   ng-pattern="/^[A-Za-z\d-]+$/" required>
                            <div class="text-danger" ng-show="(vm.baseForm.code.$touched || vm.baseForm.$submitted )">
                                {{ ((vm.baseForm.code.$error.required || vm.baseForm.code.$error.pattern) && '请输入有效应用编码 ( 允许数字、英文字母与横线 )') ||
                                    (vm.baseForm.code.$error.network && '检查应用编码请求异常, ') ||
                                    (vm.baseForm.code.$error.duplicate && '该应用编码已存在') || ''}}
                                <a ng-click="vm.checkAppCode()" ng-show="vm.baseForm.code.$error.network">重试</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-5">
                        <div class="form-tooltip-group"><i class="fa fa-question"></i>允许数字、英文字母与横线</div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-7">
                        <div class="form-group margin-bottom-0">
                            <label for="desc" class="control-label">应用简介</label>
                            <textarea ng-model="vm.desc" style="resize: none" class="form-control" id="desc" name="desc"
                                      rows="3" placeholder="请输入应用简介"></textarea>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel-form-footer">
            <a ui-sref="app-service" class="btn btn-default btn-sm">取消</a>
            <button type="submit" class="btn btn-primary btn-sm pull-right">下一步</button>
        </div>
    </form>
</ui-panel>